<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-02 10:23:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 18:05:39
-->
<template>
  <div class="footer">
    <div class="footer_top">
      <div class="footer_top_top">
        <p>----------部门导航--------</p>
        <p>▼</p>
        <p>--</p>
      </div>
      <div class="footer_top_bottom">
        <p>----------学院导航--------</p>
        <p>▼</p>
        <p>--</p>
      </div>
    </div>
    <div class="footer_bottom">
      <div class="footer_content">
        <p>
          <span>{{ address.introduce }}:{{ address.val }}</span>
          <span>{{ postcode.introduce }}:{{ postcode.val }}</span>
          <span
            >{{ email.introduce }}:<span>{{ email.val }}</span></span
          >
          <span>{{ telephone.introduce }}:{{ telephone.val }}</span>
        </p>
        <p>
          Copyright &copy;<span>{{ schoolname.val }}</span
          >All Rights Reserved.
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      address: "",
      postcode: "",
      email: "",
      telephone: "",
      schoolname: "",
    };
  },
  created() {
    this.loadaddress();
    this.loadpostcode();
    this.loademail();
    this.loadtelephone();
    this.loadschoolname();
  },
  methods: {
    loadaddress() {
      let url = "/index/findByKey?name=address";
      get(url).then((resp) => {
        this.address = resp.data;
        // console.log(this.address.val);
      });
    },
    loadpostcode() {
      let url = "/index/findByKey?name=postcode";
      get(url).then((resp) => {
        this.postcode = resp.data;
        // console.log(this.postcode.val);
      });
    },
    loademail() {
      let url = "/index/findByKey?name=email";
      get(url).then((resp) => {
        this.email = resp.data;
        // console.log(this.email.val);
      });
    },
    loadtelephone() {
      let url = "/index/findByKey?name=telephone";
      get(url).then((resp) => {
        this.telephone = resp.data;
        // console.log(this.telephone.val);
      });
    },
    loadschoolname() {
      let url = "/index/findByKey?name=schoolname";
      get(url).then((resp) => {
        this.schoolname = resp.data;
        // console.log(this.schoolname.val);
      });
    },
  },
};
</script>
<style scoped>
/* 脚部上面的侧边伸缩栏 */
.footer_top {
  width: 14rem;
  height: 8.6em;
  font-family: "宋体";
  font-size: 0.85rem;
  color: #333333;
  padding: 1em;
}
.footer_top p {
  margin: 0;
}
.footer_top p:nth-child(1) {
  margin-left: 0.3rem;
}
.footer_top p:nth-child(2) {
  margin-left: 11.8rem;
}
.footer_top p:nth-child(3) {
  text-align: center;
}
.footer_top .footer_top_top ,
.footer_top .footer_top_bottom {
  height: 3.6em;
  margin: 0.6rem;
  border: 1px solid black;
}

/* 底部样式 */
.footer_bottom {
  margin-top: 1em;
  width: 100%;
  height: 6em;
    /* 渐变色 */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgb(239, 250, 254)),
    color-stop(100%, rgb(200, 240, 255))
  );
  border-top: 3px solid #5e97cc;
}
.footer .footer_content {
  margin-top: 1.5rem;
  text-align: center;
  font-family: "宋体";
  font-size: 0.85rem;
}
.footer .footer_content > p span {
  padding-right: 0.5rem;
}
.footer .footer_content > p span:last-child {
  padding-right: 0;
}
.footer .footer_content > p span:nth-child(3) span {
  color: #336c9d;
  cursor: pointer;
}
.footer .footer_content > p span:nth-child(3) span:hover {
  color: red;
  text-decoration: underline;
}
.footer .footer_content p:nth-child(2) span {
  padding: 0 0.5rem;
}
</style>